// 导入React的useState钩子，用于管理组件状态
import { useState } from "react";
// 导入antd-mobile的UI组件：导航栏、标签页、单选按钮、标签、按钮
import { NavBar, Tabs, Radio, Tag, Button } from "antd-mobile";
// 导入当前页面的CSS样式模块
import styles from "./Index.module.css";
// 导入React Router的导航钩子，用于页面跳转
import { useNavigate } from "react-router-dom";
// 导入antd-mobile的用户添加图标
import { UserAddOutline } from "antd-mobile-icons";
// 导入antd-mobile的弹出层组件
import { Popup } from "antd-mobile";

// 定义主组件函数
function Index() {
  // 控制病人选择弹出层的显示/隐藏状态，初始值为false（隐藏）
  const [visible5, setVisible5] = useState(false);

  // 病人数据数组，包含所有可选病人的基本信息
  const bing = [
    // 第一个病人：王小柯，身份证号2015***19
    { id: 1, name: "王小柯", idCard: "2015***19" },
    // 第二个病人：李琳琳，身份证号2015***10
    { id: 2, name: "李琳琳", idCard: "2015***10" },
  ];

  // 当前选中病人状态，默认选择第一个病人（王小柯）
  const [currentPatient, setCurrentPatient] = useState(bing[0]);

  // 缴费项目数据数组，包含每个缴费项目的详细信息
  const jiaofei = [
    {
      // 第一个缴费项目：门诊外一科
      id: 1, // 项目唯一标识
      regNumber: "20200101001598Z", // 登记号
      department: "门外诊一科", // 就诊科室
      doctor: "刘医师", // 开单医生
      time: "2020-01-01 10:20:36", // 开单时间
      amount: 520.13, // 缴费金额
    },
    {
      // 第二个缴费项目：口腔科
      id: 2, // 项目唯一标识
      regNumber: "20200101001598A", // 登记号
      department: "口腔科", // 就诊科室
      doctor: "章医师", // 开单医生
      time: "2020-01-01 13:26:36", // 开单时间
      amount: 120.13, // 缴费金额
    },
  ];

  // 选中的缴费项目ID数组，用于记录哪些项目被用户选中
  const [selectedIds, setSelectedIds] = useState<number[]>([]);
  // 全选状态，true表示全选，false表示未全选
  const [selectAll, setSelectAll] = useState(false);

  // 切换单个缴费项目的选中状态函数
  const toggleItem = (itemId: number) => {
    // 更新选中项目列表
    setSelectedIds((p) => {
      // 如果当前项目已选中，则从选中列表中移除
      if (p.includes(itemId)) {
        return p.filter((id) => id !== itemId);
      } else {
        // 如果当前项目未选中，则添加到选中列表
        return [...p, itemId];
      }
    });
  };

  // 全选/取消全选功能函数
  const toggleAll = () => {
    // 如果当前是全选状态
    if (selectAll) {
      // 清空选中列表
      setSelectedIds([]);
      // 设置全选状态为false
      setSelectAll(false);
    } else {
      // 获取所有缴费项目的ID
      const allIds = jiaofei.map((item) => item.id);
      // 将所有项目ID添加到选中列表
      setSelectedIds(allIds);
      // 设置全选状态为true
      setSelectAll(true);
    }
  };

  // 计算选中项目的总金额函数
  const calculateTotal = () => {
    // 初始化总金额为0
    let total = 0;
    // 遍历所有选中的项目ID
    selectedIds.forEach(itemId => {
      // 根据ID找到对应的缴费项目数据
      const item = jiaofei.find(p => p.id === itemId);
      // 如果找到项目数据，则累加金额
      if (item) {
        total += item.amount;
      }
    });
    // 返回计算出的总金额
    return total;
  };

  // 格式化金额显示函数，保留两位小数
  const formatAmount = (amount: number) => {
    // 返回格式化的金额字符串，如"￥520.13"
    return `￥${amount.toFixed(2)}`;
  };
  

  // 获取导航函数，用于页面跳转
  const nav = useNavigate();
  
  // 返回JSX结构
  return (
    // 主容器div，应用整体样式
    <div className={styles.jiaoz}>
      {/* 顶部导航栏区域 */}
      <div className={styles.nav}>
        {/* 导航栏组件，显示"门诊缴费"标题，点击返回上一页 */}
        <NavBar onBack={() => nav(-1)}>门诊缴费</NavBar>
      </div>

      {/* 用户信息显示区域 */}
      <div className={styles.user}>
        {/* 显示当前选中病人的信息 */}
        <div style={{ marginLeft: "20px", paddingTop: "5px" }}>
          {/* 显示当前选中病人的姓名 */}
          {currentPatient.name}
          {/* 显示当前选中病人的身份证号，灰色显示 */}
          <span style={{ marginLeft: "10px", color: "gray" }}>
            {currentPatient.idCard}
          </span>
        </div>
        {/* 切换病人按钮，点击打开病人选择弹出层 */}
        <div
          style={{ paddingTop: "6px", marginRight: "15px" }}
          onClick={() => setVisible5(true)}
        >
          {/* 用户添加图标 */}
          <UserAddOutline />
          {/* 切换文字 */}
          切换
        </div>
      </div>

      {/* 病人选择弹出层 */}
      <Popup
        // 控制弹出层的显示/隐藏，绑定visible5状态
        visible={visible5}
        // 点击遮罩层时关闭弹出层
        onMaskClick={() => {
          setVisible5(false);
        }}
        // 弹出层主体样式设置
        bodyStyle={{
          borderTopLeftRadius: "8px", // 左上角圆角
          borderTopRightRadius: "8px", // 右上角圆角
          minHeight: "60vh", // 最小高度为视口高度的60%
        }}
      >
        {/* 弹出层内容容器 */}
        <div>
          {/* 弹出层标题 */}
          <h3 style={{ textAlign: "center", marginTop: "17px" }}>选择就诊人</h3>

          {/* 遍历病人数组，动态生成病人选择选项 */}
          {bing.map((bing) => (
            // 每个病人选项的容器div
            <div
              key={bing.id} // React要求的唯一key值
              className={styles.liy} // 应用病人选项样式
              onClick={() => {
                // 点击病人时，更新选中状态并关闭弹出层
                setCurrentPatient(bing);
                setVisible5(false);
              }}
              style={{
                // 根据是否选中设置不同的背景色和边框
                backgroundColor:
                  currentPatient.id === bing.id ? "#e6f4ff" : "#f5f5f5", // 选中时浅蓝色，未选中时浅灰色
                border:
                  currentPatient.id === bing.id
                    ? "2px solid #1890ff" // 选中时蓝色边框
                    : "2px solid transparent", // 未选中时透明边框
              }}
            >
              {/* 病人信息显示区域 */}
              <div className={styles.name}>
                {/* 显示病人姓名 */}
                {bing.name}
                {/* 显示病人身份证号，灰色显示 */}
                <span style={{ marginLeft: "16px", color: "gray" }}>
                  {bing.idCard}
                </span>
                {/* 当前选中的病人显示勾选标记 */}
                {currentPatient.id === bing.id && (
                  <span
                    style={{
                      marginLeft: "10px", // 左边距
                      color: "#1890ff", // 蓝色
                      fontWeight: "bold", // 粗体
                    }}
                  >
                    ✓
                  </span>
                )}
              </div>
            </div>
          ))}

          {/* 添加就诊人按钮区域 */}
          <div style={{ marginTop: "150px" }}>
            {/* 添加就诊人按钮 */}
            <Button block color="primary" size="large" className={styles.btn}>
              添加就诊人
            </Button>
          </div>
        </div>
      </Popup>

      {/* 主要内容区域 */}
      <div className={styles.tab}>
        {/* 标签页组件 */}
        <Tabs>
          {/* 代缴费标签页 */}
          <Tabs.Tab title="代缴费" key="fruits">
            {/* 遍历缴费项目，动态生成缴费明细卡片 */}
            {jiaofei.map((item) => (
              // 每个缴费项目的卡片容器
              <div key={item.id} className={styles.card} style={{ marginTop: "10px" }}>
                {/* 卡片标题行，包含登记号和单选按钮 */}
                <h3 style={{ marginLeft: "10px", paddingTop: "10px" }}>
                  {/* 显示登记号 */}
                  登记号: {item.regNumber}{" "}
                  {/* 单选按钮区域 */}
                  <span style={{ marginLeft: "60px" }}>
                    {/* 单选按钮，绑定选中状态和点击事件 */}
                    <Radio 
                      checked={selectedIds.includes(item.id)} // 根据是否在选中列表中设置选中状态
                      onChange={() => toggleItem(item.id)} // 点击时切换选中状态
                    />
                  </span>
                </h3>
                {/* 显示就诊科室信息 */}
                <div style={{ marginLeft: "10px", marginTop: "10px" }}>
                  就诊科室:{item.department}
                </div>
                {/* 显示开单医生信息 */}
                <div style={{ marginLeft: "10px", marginTop: "10px" }}>
                  开单医生:{item.doctor}
                </div>
                {/* 显示开单时间信息 */}
                <div style={{ marginLeft: "10px", marginTop: "10px" }}>
                  开单时间:{item.time}
                </div>
                {/* 显示开单金额信息 */}
                <div style={{ marginLeft: "10px", marginTop: "10px" }}>
                  开单金额:<span style={{ color: "red" }}>{formatAmount(item.amount)}</span>
                  {/* 缴费明细链接 */}
                  <span style={{ color: "blue", marginLeft: "110px" }}>
                    缴费明细{'>'}
                  </span>
                </div>
              </div>
            ))}

            {/* 底部合计区域 */}
            <div className={styles.footer}>
              {/* 左侧信息区域 */}
              <div>
                {/* 全选区域 */}
                <div style={{ marginLeft: "10px", marginTop: "10px" }}>
                  {/* 全选单选按钮 */}
                  <Radio 
                    checked={selectAll} // 绑定全选状态
                    onChange={toggleAll} // 点击时切换全选状态
                  />
                  {/* 显示已选数量，动态显示当前选中的项目数量 */}
                  <span>全选(已选{selectedIds.length}张)</span>
                </div>

                {/* 合计金额显示区域 */}
                <div style={{ marginTop: "10px", marginLeft: "10px" }}>
                  合计：<span style={{ color: "red" }}>{formatAmount(calculateTotal())}</span>
                </div>
              </div>

              {/* 右侧按钮区域 */}
              <div>
                {/* 去缴费按钮 */}
                <Button
                  size="middle" // 中等尺寸
                  color="primary" // 主要颜色（蓝色）
                  className={styles.btn} // 应用按钮样式
                  onClick={() => nav("/quejiao")} // 点击跳转到确认缴费页面
                  // 没有选中项目时禁用按钮
                  disabled={selectedIds.length === 0}
                >
                  去缴费
                </Button>
              </div>
            </div>
          </Tabs.Tab>

          {/* 已缴费标签页 */}
          <Tabs.Tab title="已缴费" key="vegetables">
            {/* 提示信息 */}
            <div
              style={{ textAlign: "center", marginTop: "10px", color: "gray" }}
            >
              默认查询近3个月内的缴费订单
            </div>

            {/* 第一个已缴费项目卡片 */}
            <div className={styles.card1} style={{ marginTop: "10px" }}>
              {/* 卡片标题，包含登记号和状态标签 */}
              <h3 style={{ marginLeft: "10px", paddingTop: "10px" }}>
                登记号: 20200101001598Z{" "}
                {/* 已缴费状态标签 */}
                <span style={{ marginLeft: "40px" }}>
                  <Tag color="#2db7f5">已缴费</Tag>
                </span>
              </h3>
              {/* 就诊科室信息 */}
              <div style={{ marginLeft: "10px", marginTop: "10px" }}>
                就诊科室:门诊外一科
              </div>
              {/* 开单医生信息 */}
              <div style={{ marginLeft: "10px", marginTop: "10px" }}>
                开单医生:刘医师
              </div>
              {/* 开单时间信息 */}
              <div style={{ marginLeft: "10px", marginTop: "10px" }}>
                开单时间:2020-01-01 10:20:36
              </div>
              {/* 开单金额信息 */}
              <div
                style={{ marginLeft: "10px", marginTop: "10px" }}
                className={styles.di}
              >
                开单金额:<span style={{ color: "red" }}>￥520.13</span>
              </div>

              {/* 缴费详情链接 */}
              <div
                style={{
                  textAlign: "center", // 居中对齐
                  marginTop: "10px", // 上边距
                  color: "blue", // 蓝色文字
                  fontSize: "16px", // 字体大小
                }}
              >
                缴费详情
              </div>
            </div>

            {/* 第二个已缴费项目卡片（已退费） */}
            <div className={styles.card1} style={{ marginTop: "10px" }}>
              {/* 卡片标题，包含登记号和退费状态标签 */}
              <h3 style={{ marginLeft: "10px", paddingTop: "10px" }}>
                登记号: 20200101001598Z{" "}
                {/* 已退费状态标签 */}
                <span style={{ marginLeft: "40px" }}>
                  {" "}
                  <Tag color="danger">已退费</Tag>
                </span>
              </h3>
              {/* 就诊科室信息 */}
              <div style={{ marginLeft: "10px", marginTop: "10px" }}>
                就诊科室:门诊外一科
              </div>
              {/* 开单医生信息 */}
              <div style={{ marginLeft: "10px", marginTop: "10px" }}>
                开单医生:刘医师
              </div>
              {/* 开单时间信息 */}
              <div style={{ marginLeft: "10px", marginTop: "10px" }}>
                开单时间:2020-01-01 10:20:36
              </div>
              {/* 开单金额信息 */}
              <div
                style={{ marginLeft: "10px", marginTop: "10px" }}
                className={styles.di}
              >
                开单金额:<span style={{ color: "red" }}>￥520.13</span>
              </div>

              {/* 缴费详情链接 */}
              <div
                style={{
                  textAlign: "center", // 居中对齐
                  marginTop: "10px", // 上边距
                  color: "blue", // 蓝色文字
                  fontSize: "16px", // 字体大小
                }}
              >
                缴费详情
              </div>
            </div>
          </Tabs.Tab>
        </Tabs>
      </div>
    </div>
  );
}

// 导出主组件，供其他文件导入使用
export default Index;
